<template>
  <!--  表格：装主体数据   -->
  <div>
    <div class="button-container" style="text-align: left">
      <el-button type="primary" @click="addTypes">添加类型</el-button>
    </div>
    <el-table ref="multipleTable" :data="typesList" tooltip-effect="dark" style="width: 100%;"
              @selection-change="handleSelectionChange" line-hight="38px">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="tid" label="类型编码" width="120"></el-table-column>
      <el-table-column prop="tname" label="类型名称" width="120"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle
                     @click="handleEdit(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle
                     @click="handleDelete(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页   -->
    <br>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[1, 2, 3]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    >
    </el-pagination>

<!--    -->
    <!-- 修改的模态框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="typess" :rules="rules" ref="sbuinessForm" label-width="120px">
        <el-form-item label="鲜花编码" prop="tid">
          <el-input v-model="typess.tid" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="商铺编码" prop="sid">
          <el-input v-model="typess.sid" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="鲜花名称" prop="tname">
          <el-input v-model="typess.tname" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmit">取 消</el-button>
        <el-button type="primary"  @click="updateTypes">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 添加的模态框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisibles">
      <el-form :model="typess" :rules="rules" ref="sbuinessForm" label-width="120px">
        <!-- ... 其他表单项 ... -->
        <el-form-item label="商铺编码" prop="sid" :rules="[{ required: true, message: '商铺编码不能为空', trigger: 'blur' }]">
          <el-input v-model="typess.sid" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="鲜花名称" prop="tname" :rules="[{ required: true, message: '鲜花名称不能为空', trigger: 'blur' }]">
          <el-input v-model="typess.tname" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmits">取 消</el-button>
        <el-button type="primary"  @click="addTypess">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.table-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.button-container {
  margin-bottom: 10px;
  padding-left: 0;/* 根据需要调整间距 */
}
</style>
<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      shopsName: '',
      title: '',
      typess: {
        tid: 0,
        tname: '',
        sid: 13,
      },
      Shop:{
        sid: 0,
        sname: '',
        spassword: '',
        siphone: '',
        src: '',
      },
      typesList: [],
      dialogFormVisible: false,
      dialogFormVisibles: false,
      total: '',
      pageNum: 1,
      pageSize: 3,
      rules: {
        typess: {
          tname: [
            {required: true, message: '类型名称不能为空', trigger: 'blur'}
          ]
        }
      },
    }
  },

  methods: {
    handleSizeChange(newSize) {
      this.pageNum = 1;
      this.pageSize = newSize;
      this.readType()
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.readType()
    },
    getToken(){
      request({
        method: 'post',
        url: 'http://localhost:9092/shops/getTook',
      }).then(res => {
        if (res.data.code === 200) {
          this.Shop = res.data.data;
          this.shopsName = res.data.data.sname
          this.Shop.sname = this.shopsName;
          this.readType();
        }else {
          this.$router.replace("/")
        }
      })
    },
    addTypes(){
      this.typess.tname = '';
      this.dialogFormVisible = false;
      this.dialogFormVisibles = true;
    },
    addTypess(){
      this.$refs.sbuinessForm.validate((valid) => {
        if (valid) {
            this.addsTypes();
        } else {
          // 验证失败
          console.log('表单验证失败');
          this.$message.error('请检查表单数据');
          return false;
        }
      });
    },
    addsTypes(){
      let len = this.total;
      let sizes = this.pageSize;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: 'http://localhost:9092/Types/addTypes',
          method: 'post',
          data: this.typess
        }).then(response => {
          if (response.data.code === 200) {
            this.$message({
              type: 'success',
              message: response.data.msg
            });
            if (len  % sizes === 0) {
              this.pageNum += 1;
            }
            this.dialogFormVisibles = false
            this.dialogFormVisible = false
            this.getToken()
          } else {
            this.$message({
              type: 'error',
              message: response.data.msg
            });
          }
        }).catch(error => {
          console.error('请求失败:', error);
          this.$message.error('请求失败');
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消添加'
        });
      });
    },
    cancelSubmits(){
      this.typess.tname = '';
      this.dialogFormVisible = false;
      this.dialogFormVisibles = false;
      this.getToken()
    },
    cancelSubmit(){
      this.dialogFormVisible = false;
      this.dialogFormVisibles = false;
      this.getToken()
    },
    updateTypes(){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: 'http://localhost:9092/Types/updateType',
          method: 'post',
          data: this.typess
        }).then(response => {
          if (response.data.code === 200) {
            this.$message({
              type: 'success',
              message: response.data.msg
            });
            this.dialogFormVisible = false
            this.getToken()
          } else {
            this.$message({
              type: 'error',
              message: response.data.msg
            });
          }
        }).catch(error => {
          console.error('请求失败:', error);
          this.$message.error('请求失败');
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
    readType(){
      request({
        method: 'post',
        url: 'http://localhost:9092/Types/findAll',
        params: {
          pageNum : this.pageNum,
          pageSize : this.pageSize
        }
      }).then(res => {
        if (res.data.code===200) {
          this.typesList = res.data.data.data;
          this.total = res.data.data.total
        }
      })
    },
    handleEdit(data){
      this.title = "修改框";
      this.typess = data;
      this.dialogFormVisible = true;
    },
    handleDelete(data){
      let len = this.total;
      let sizes = this.pageSize;

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: 'http://localhost:9092/Types/deleteType',
          method: 'post',
          data: data
        }).then(response => {
          if (response.data.code === 200) {
            this.$message({
              type: 'success',
              message: response.data.msg
            });
            if ((len - 1) % sizes === 0) {
              this.pageNum -= 1;
            }
            this.getToken()
          } else {
            this.$message({
              type: 'error',
              message: response.data.msg
            });
          }
        }).catch(error => {
          console.error('请求失败:', error);
          this.$message.error('请求失败');
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  created() {
    this.getToken()
  },

}
</script>